<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>app-router</title>
    <script src="/bower_components/platform-dev/platform.js" debug></script>
    <script src="/src/app-router.js"></script>
    <link rel="import" href="pages/bundled-elements.html">
  </head>
  <body>
    <style>
      p {
        margin-top: 50px;
      }
    </style>

    <p>Test the different <code>app-route</code> types by navigating through these links.</p>
    <ul>
      <li><a href="#/custom-element">/custom-element</a></li>
      <li><a href="#/preloaded-bundled-custom-element">/preloaded-bundled-custom-element</a></li>
      <li><a href="#/imported-bundled-custom-element">/imported-bundled-custom-element</a></li>
      <li><a href="#/template">/template</a></li>
      <li><a href="#/inline-template">/inline-template</a></li>
      <li><a href="#/word/123">/regular-expression</a></li>
      <li><a href="#/canceled-event">/canceled-event</a></li>
    </ul>

    <!-- defaults -->
    <p>All of these links should match different variations of elements, templates, lazy-loading, and inline.</p>
    <app-router id="default-router">
      <app-route path="/custom-element" import="pages/custom-element-page.html"></app-route>
      <app-route path="/preloaded-bundled-custom-element" element="preloaded-custom-element-page"></app-route>
      <app-route path="/imported-bundled-custom-element" import="pages/imported-bundled-elements.html" element="imported-custom-element-page"></app-route>
      <app-route path="/template" import="pages/template-page.html" template></app-route>
      <app-route path="/inline-template" template>
        <template>
          <h2>Inline Template Page</h2>
        </template>
      </app-route>
      <app-route path="/^\/\w+\/\d+$/i" regex template>
        <template>
          <h2>Regular Expression <code>/^\/\w+\/\d+$/i</code></h2>
        </template>
      </app-route>
      <app-route path="*" import="pages/not-found-page.html"></app-route>
    </app-router>

    <!-- trailingSlash="ignore" -->
    <p>Should ignore trailing slashes and match "/custom-element" and "/custom-element/" with the same route.</p>
    <app-router trailingSlash="ignore" id="ignore-trailing-slash">
      <app-route path="/custom-element/" import="pages/custom-element-page.html"></app-route>
      <app-route path="*" import="pages/not-found-page.html"></app-route>
    </app-router>

    <!-- shadow -->
    <p>Hide content in a shadow root. Only matches "/custom-element".</p>
    <app-router shadow id="shadow-router">
      <app-route path="/custom-element" import="pages/custom-element-page.html"></app-route>
      <app-route path="*" import="pages/not-found-page.html"></app-route>
    </app-router>

    <!-- init="manual" -->
    <p>Should manually be initialized. Only matches "/custom-element".</p>
    <app-router init="manual" id="manual-init">
      <app-route path="/custom-element" import="pages/custom-element-page.html"></app-route>
      <app-route path="*" import="pages/not-found-page.html"></app-route>
    </app-router>
    <script>
      document.querySelector('#manual-init').init();
    </script>

    <!-- lifecycle events -->
    <p>Logs lifecycle events. Should <code>preventDefault()</code> when navigating to <code>/canceled-event</code>.</p>
    <app-router init="manual" id="lifecycle-events">
      <app-route path="/custom-element" import="pages/custom-element-page.html"></app-route>
      <app-route path="/canceled-event" template id="canceled-event">
        <template>
          <h2>Canceled Event (broken if you can see this)</h2>
        </template>
      </app-route>
      <app-route path="*" import="pages/not-found-page.html"></app-route>
    </app-router>
    <script>
      (function() {
        var router = document.querySelector('#lifecycle-events');
        var firstRoute = router.querySelector('app-route');
        function routerEventHandler(event) {
          console.log('router: ' + event.type);
          console.log(event.detail);
        }
        function routeEventHandler(event) {
          console.log('route: ' + event.type);
          console.log(event.detail);
        }
        router.addEventListener('state-change', routerEventHandler);
        router.addEventListener('activate-route-start', routerEventHandler);
        router.addEventListener('activate-route-end', routerEventHandler);
        firstRoute.addEventListener('activate-route-start', routeEventHandler);
        firstRoute.addEventListener('activate-route-end', routeEventHandler);

        document.querySelector('#canceled-event').addEventListener('activate-route-start', function(event) {
          event.preventDefault();
        });
        router.init();
      })();
    </script>

  </body>
</html>
